How to Create & Embed a WhatsApp Chat Widget

Adding a WhatsApp chat option to your website makes it easier for visitors to reach you instantly through a familiar, widely used platform. With BotSailor’s WhatsApp Chat Widget, you can customize the look, behavior, and messaging of the widget to match your brand and improve customer interaction. This guide walks you through accessing your WhatsApp bot settings, configuring the chat widget, and embedding it into your website’s HTML, so you can start engaging your audience right from your site.

Why You Should Use WhatsApp Chat Widget?

Trusted Platform: Engage users via WhatsApp’s familiar interface.
Pre-Fill Messages: Speed up customer inquiries.
Custom Design: Align colors, logos, and positioning with your brand.
Instant Setup: Embed with one script.

Now let's dive into the process.

Step 1: Access Chat Widget Settings

Log in to your BotSailor dashboard.
From the sidebar menu, select WhatsApp > Bot Manager.
From the list, choose your WhatsApp bot account (e.g., DigiLab Enterprise).
Under your selected WhatsApp account, click on Chat Widget.
On the Chat Widget settings page, click the Create button located at the top right.

Step 2: Configure Your Chat Widget

In the Configure Action Button section:
Choose "WhatsApp short link" from the Actions dropdown.
Upload your chatbot logo (PNG/JPG supported).
Customize the Chatbox header background and text color.
Set the Display name, Welcome message, and Pre-fill message.
Choose the Chatbox position (e.g., bottom-right).
Specify if the Chatbox should open on startup or stay closed initially.
Set the offset positions (X and Y) to fine-tune the widget's location.
Customize the Button text, background, text color, and hover effects.
Select the button size (Medium, Large, or Extra Large).
Add a reference name for internal identification (mandatory).

Step 3: Finalize and Save

Once configured, click Save at the top right of the page.
To integrate the widget on your website, click the Embed Code (</>) button, copy the generated script, and paste it into your website's HTML code.

Congratulations! Your Chat Widget is now active and ready to improve customer interaction on your website.

❓ Frequently Asked Questions (FAQ)

What is the WhatsApp Chat Widget in BotSailor?
The WhatsApp Chat Widget allows you to add a clickable WhatsApp chat button on your website, enabling visitors to message your business directly via WhatsApp.

How do I access the WhatsApp Chat Widget settings?
Log in to your BotSailor dashboard → Go to WhatsApp > Bot Manager → Select your WhatsApp bot (e.g., DigiLab Enterprise) → Click on Chat Widget → Click the Create button.

What action should I choose while configuring the widget?
Choose “WhatsApp short link” from the Actions dropdown to enable WhatsApp chat redirection with a pre-filled message.

Can I customize the widget’s appearance?
Yes, you can customize the header color, button text, background color, hover effects, font size, position (X/Y axis), and upload your logo to align with your brand identity.

What is the purpose of the pre-fill message option?
The pre-fill message allows you to auto-generate a default message in the WhatsApp chat box when a user clicks the button, reducing typing effort and speeding up communication.

Where should I paste the WhatsApp widget embed code?
After saving the widget, click the Embed Code (</>) button, copy the script, and paste it just before the </body> tag of your website’s HTML file.

Is the WhatsApp chat widget mobile responsive?
Yes, the widget is fully responsive and optimized for both mobile and desktop visitors.

Can I change the widget behavior after it’s live?
Absolutely. You can return to the widget settings, make changes, and re-save. The updates will be reflected automatically if the code is already embedded.

What is the “reference name” in the widget settings?
The reference name is a required internal identifier to help you distinguish between multiple widgets in your BotSailor dashboard.

Do I need a WhatsApp Business API to use this feature?
Yes, you must have a verified WhatsApp bot connected to BotSailor through the WhatsApp Business API to use the chat widget functionality.